<!--
 * @Author: poro poroone@163.com
 * @Date: 2023-04-19 16:43:14
 * @LastEditors: poro poroone@163.com
 * @LastEditTime: 2023-05-10 08:56:06
 * @FilePath: \Vue学习\vue3\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
       <el-config-provider :locale="locale">
      <app />
    </el-config-provider>
    <div>
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
        <button @click="add">添加</button>
        <br>
        <from>
            <input v-model="a.name" type="text">
            <br>
            <input v-model="a.age" type="text">
            <br>
            <button @click.prevent="submit">提交</button>
        </from>

    </div>
</template>

<script setup lang='ts'>
import { defineComponent } from 'vue'
  import { ElConfigProvider } from 'element-plus'

  import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

  export default defineComponent({
    components: {
      ElConfigProvider,
    },
    setup() {
      return {
        locale: zhCn,
      }
    },
  })
import { ref, reactive } from 'vue'
// ref reactive
// reactive场景 如表单 

// ref 支持所有类型 
// reactive 支支持引用类型

//ref 取值和赋值都需要加.value
// reactive不需要加.value 


type M = {
    name: string,
    age: number
}
// 对象
let a = reactive({
    name: "poro",
    age: 23
})
const submit = () => {
    console.log(a)
}
// reactive 是proxy代理的不能直接赋值否则破坏响应式对象
// 解决方案:
// 1.数组可以使用push 加解构
// 2.
// 1.数组
let list = reactive<string[]>([])
// 2.改成对象
let list1 = reactive<{ arr: string[] }>({ arr: [] })
const add = () => {

    let res = ["魄罗", "小破罗", "大魄罗", "魄罗王"]
    // 1.
    list.unshift(...res)
    // 2.
    list1.arr = res
    console.log(list)
}

</script>
<style scoped></style>